<template>
  <div class="page-container">
    <el-input v-model="filterName" clearable />
    <!-- <el-button class="ml-auto" type="primary" size="default" @click="router.go(-1)">返回</el-button> -->
    <h3>基础信息</h3>
    <el-row :gutter="10">
      <el-col :sm="24" :md="12" :lg="8">
        <div class="bg-green w-full border-rd-md line-height-6">
          <p class="text-align-center font-bold">平台名</p>
          <p class="text-align-center">{{ name }}</p>
        </div>
      </el-col>
      <el-col :sm="24" :md="12" :lg="8">
        <div class="bg-green w-full border-rd-md line-height-6">
          <p class="text-align-center font-bold">平台版本号</p>
          <p class="text-align-center">{{ version }}</p>
        </div>
      </el-col>
    </el-row>

    <h3 class="mt-[20px]">dependencies依赖</h3>
    <el-row :gutter="10">
      <el-col v-for="(item, key) in dependencies" :key="key" :sm="24" :md="12" :lg="8">
        <div class="bg-blue w-full border-rd-md line-height-6">
          <p class="text-align-center font-bold">{{ key }}</p>
          <p class="text-align-center">{{ item }}</p>
        </div>
      </el-col>
    </el-row>

    <h3 class="mt-[20px]">devDependencies依赖</h3>
    <el-row :gutter="10">
      <el-col v-for="(item, key) in devDependencies" :key="key" :sm="24" :md="12" :lg="8">
        <div class="bg-yellow w-full border-rd-md line-height-6">
          <p class="text-align-center font-bold">{{ key }}</p>
          <p class="text-align-center">{{ item }}</p>
        </div>
      </el-col>
    </el-row>
  </div>
</template>

<script setup lang="ts">
import { useRouter } from "vue-router";
import packageJson from "../../../package.json";
import { ref } from "vue";
const router = useRouter();
defineOptions({
  name: "ExploitVersion"
});
const { name, version, dependencies, devDependencies } = packageJson;

const filterName = ref("");
</script>

<style lang="scss" scoped>
.el-col {
  margin-top: 10px;
}

.cs {
  display: -webkit-box;
  overflow: hidden;
  text-overflow: ellipsis;
  -webkit-line-clamp: 3; // 控制多行的行数
  -webkit-box-orient: vertical;
}
</style>
